<template>
    <div class="monitor-infor">
        <headTop :theRouter="therouter"></headTop>
        <div class="monitor-time" v-if="show==0">
            <div class="monitor-fixed">
                <div class="monitor-top time-top fn-clear">
                    <div class="times-le" :class="{'active':(textaindex==index+1)||showNum==true}" @click="textaBtn(index)" v-for="(item,index) in textaList" :key="item.id">
                        <div class="le-padd">
                            <div class="le-text">
                                <span>{{item}}</span>
                                <span class="time-second">
                                    ({{startTime.substring(5,16)}}至{{endTime.substring(5,16)}})
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="times-ri" :class="{'active':textbindex==index+1}" @click="textbBtn(index)" v-for="(item,index) in textbList" :key="item.id">
                        <i class="tinme-po"></i>
                        <div class="ri-padd">
                            <div class="ri-text">
                                <span>{{item}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="page-list">
                    <span class="lista" @click="timeDetailbtn">实时监测</span>
                    <span class="listb" v-show="showFirse">
                        <span class="jiantou">></span>
                        <span class="textjian">{{titleName}}</span>
                    </span>
                </div>
            </div>
            <div class="month-text" v-if="textaindex==1">
                <div class="sele-back">
                    <div class="select">
                        <input type="text" class="" placeholder="输入电站名" v-model="hy_nameb">
                        <div class="segment seg-inp"></div>
                        <button @click="searchmonBrn"></button>
                    </div>
                </div>
                <!-- 四种状态  start -->
                <div class="detail-time detail" v-if="montsanum==0">
                    <ul>
                        <li class="detail-li time-li" v-for="(item,index) in data_detail_time" :key="index" @click="detailBtn(index)">
                            <i :class="'icon'+index" class="data-tip"></i>
                            <div class="data-con">
                                <span class="data-t">{{item.tit}}</span>
                                <span class="data-d">{{item.desc}}</span>
                            </div>
                            <div class="data-ris">
                                <div :class="'num'+index" class="data-num">
                                    <em>{{item.number}}</em>
                                    <span>座</span>
                                </div>
                                <i class="next"></i>
                            </div>
                            
                        </li>
                    </ul>
                </div>
                 <!-- 四种状态  end  -->
                <!-- v-show="montsanum==1" -->
                <div class="detail-time detail"  v-if="montsanum==1">
                    <div class="detail-his" >
                        <ul>
                            <li class="detail-li his-li fn-clear" v-for="(item) in dataDetaiList" :key="item.id" @click="detailButta(item.hy_code)">
                                <div class="datah-con">
                                    <div class="con-tes">
                                        <i :class="'iconh'+item.flow_status" class="datah-tip"></i>
                                        <span class="datah-t">{{item.hy_name}}</span>
                                    </div>
                                    <p class="datah-d">{{item.com_locations}}</p>
                                </div>
                                <div class="his-data">
                                    <div class="data-ones">{{item.collection_time}}</div>
                                    <div class="data-two">
                                        <em>{{item.ecology_out_flow}}</em>
                                        <span>m³/s</span>
                                    </div>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 最新 start -->
            <div class="new-text" v-if="textbindex==1">
                <div class="sele-back">
                    <div class="select">
                        <input type="text" class="" placeholder="输入电站名" v-model="hy_namea">
                        <div class="segment seg-inp"></div>
                        <button @click="searchBrn"></button>
                    </div>
                </div>
                <div class="detail-time detail">
                    <div class="detail-his">
                        <ul>
                            <li class="detail-li his-li fn-clear" v-for="(item,index) in dataDetaiList" :key="item.id" @click="detailButta(item.hy_code)">
                                <div class="datah-con">
                                    <div class="con-tes">
                                        <i :class="'iconh'+item.flow_status" class="datah-tip"></i>
                                        <span class="datah-t">{{item.hy_name}}</span>
                                    </div>
                                    <p class="datah-d">{{item.com_locations}}</p>
                                </div>
                                <div class="his-data">
                                    <div class="data-ones">{{item.collection_time}}</div>
                                    <div class="data-two">
                                        <em>{{item.ecology_out_flow}}</em>
                                        <span>m³/s</span>
                                    </div>
                                </div>
                            </li>
                            <infinite-loading :identifier="infiniteId" 
                              ref="infiniteLoading"
                              @infinite="infiniteHandler" >
                              <span slot="no-more">没有更多了</span>
                              <div slot="no-results">暂无数据</div>
                            </infinite-loading>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 最新  end -->
            <div class="status-text" v-if="textbindex==2">
                <div class="sele-back">
                    <div class="select">
                        <input type="text" class="" placeholder="输入电站名" v-model="hy_namea">
                        <div class="segment seg-inp"></div>
                        <button @click="searchBrn"></button>
                    </div>
                </div>
                <!-- 四种状态点进去的列表 start -->
                <div class="detail-time detail">
                    <div class="detail-his">
                        <ul>
                            <li class="detail-li his-li fn-clear" v-for="(item,index) in dataDetaiList1" :key="item.id" @click="detailButta(item.hy_code)">
                                <div class="datah-con">
                                    <div class="con-tes">
                                        <i :class="'iconh'+item.flow_status" class="datah-tip"></i>
                                        <span class="datah-t">{{item.hy_name}}</span>
                                    </div>
                                    <p class="datah-d">{{item.com_locations}}</p>
                                </div>
                                <div class="his-data">
                                    <div class="data-pass"></div>
                                    <div class="data-two">
                                        <em>{{item.ecology_out_flow}}</em>
                                        <span>m³/s</span>
                                    </div>
                                </div>
                            </li>
                            <infinite-loading  :identifier="infiniteId"
                              @infinite="fourListHandler" >
                              <span slot="no-more">没有更多了</span>
                              <div slot="no-results">暂无数据</div>
                            </infinite-loading>
                        </ul>
                    </div>
                </div>
            </div>
            
        </div>
        <!-- 历史监测 start -->
        <div class="monitor-history" v-else="show==1">
            <div class="monitor-fixed">
                <div class="monitor-top his-top">
                    <div class="date">
                        <i class="date-pre date-icon"></i>
                        <input type="button" class="btn-default btn-pre" @click="btn1" value="前一天">
                        <input type="text" readonly="readonly" class="form-control" id="date1" :value="valueToday" @click="datePicker">
                        <input type="button" class="btn-default btn-next change-color" @click="btn2" value="后一天">
                        <i class="date-next date-icon"></i>
                    </div>
                </div>
                <div class="sele-back back-second">
                    <div class="select">
                        <input type="text" class="" placeholder="输入电站名" v-model="hy_name">
                        <div class="segment seg-inp"></div>
                        <button @click="historyBtn"></button>
                    </div>
                </div>
            </div>
            <div class="detail-his">
                <ul>
                    <li class="detail-li his-li fn-clear" v-for="(item,index) in data_detail_his" :key="index" @click="detailButta(item.hy_code)">
                        <div class="datah-con">
                            <div class="con-tes">
                                <i :class="'iconh'+item.flow_status" class="datah-tip"></i>
                                <span class="datah-t">{{item.hy_name}}</span>
                            </div>
                            <p class="datah-d">{{item.com_locations}}</p>
                        </div>
                        <div class="his-data">
                            <div class="data-ones">{{item.create_time}}</div>
                            <div class="data-two">
                                <em>{{item.average_flow}}</em>
                                <span>m³/s</span>
                            </div>
                        </div>
                    </li>
                    <infinite-loading :identifier="infiniteId"
                              @infinite="historyHandler" >
                      <span slot="no-more">没有更多了</span>
                      <div slot="no-results">暂无数据</div>
                    </infinite-loading>
                </ul>
            </div>
        </div>
        <!-- 历史监测  end -->
        <!-- 底部按钮 -->
        <div class="monitor-bottom">
            <div class="bottom-con" v-for="(item,index) in data_tit" :key="item.id" @click="listBtn(index)" :class="{'active':show==index}">
                <i :class="'tip'+index"></i>
                <span>{{item.label}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import $ from "jquery";
import { BASEURL } from "./../api/api";
import axios from "axios";
import headTop from "./common/header";
import InfiniteLoading from 'vue-infinite-loading'
export default {
  name: "login",
  components: { headTop,InfiniteLoading},
  data() {
    return {
      textaList: ["24小时"],
      textbList: ["最新"],
      infiniteId: +new Date(),
      fourType:0,
      textaindex: 1,
      textbindex: 0,
      montsanum: 0,
      isNew:false,
      showFirse: false,
      show: 0,
      ecology_out_flow: 0,
      showNum: false,
      valueToday: "",
      tcur: "",
      areaCode: localStorage.getItem('areaCode'),
      hy_name: "",
      hy_namea: "",
      hy_nameb: "",
      startTime: "",
      endTime: "",
      titleName: "",
      flow_status: "",
      pageNo:1,
      pageSize:10,
      data_detail_time: [
        {
          tit: "数据异常",
          desc: "小于最小下泄量",
          number: 0
        },
        {
          tit: "断流",
          desc: "超6小时未上报",
          number: 0
        },
        {
          tit: "未接入",
          desc: "未上报过数据",
          number: 0
        },
        {
          tit: "正常",
          desc: "数据正常上报",
          number: 0
        }
      ],
      data_tit: [
        {
          label: "实时监测"
        },
        {
          label: "历史监测"
        }
      ],
      dataDetaiList: [],
      dataDetaiList1: [],
      data_detail_his: [],
      status_a: 0,
      status_name: 0
    };
  },
  computed: {
    therouter: function() {
      return this.$route;
    }
  },
  created() {
    let _this = this;
    _this.init();
    _this.showTime(0);
    let cur_year = new Date().getFullYear();
    let cur_month = new Date().getMonth() + 1;
    let real_date = new Date().getDate();
    cur_month = cur_month > 9 ? cur_month : "0" + cur_month;
    real_date = real_date > 9 ? real_date : "0" + real_date;
    _this.valueToday = cur_year + "-" + cur_month + "-" + real_date;
    _this.today = cur_year + "-" + cur_month + "-" + real_date;
    //_this.historys();
    if ((_this.hy_nameb = "")) {
      _this.searchmonBrn();
    }
    if ((_this.hy_namea = "")) {
      _this.normal();
      _this.catout();
      _this.abnormal();
      _this.noaccess();
      _this.textbBtn();
    }
    if ((_this.hy_name = "")) {
      //_this.historys();
    }
  },
  methods: {
    //底部切换
    listBtn(index) {
      let _this = this;
      _this.show = index;
      this.pageNo = 1;

      if (index == 0) {
        _this.init();
      } else if (index == 1) {//历史监测
        this.data_detail_his = [];
      }
    },
    //详情
    detailButta(hy_code) {
      this.$router.push({
        path: "/monitordetails",
        query: {
          hy_code: hy_code
        }
      });
    },
    //24小时
    textaBtn(index) {

      this.hy_namea = "";
      this.textaindex = index + 1;
      this.textbindex = index;
      this.showFirse = false;
      this.montsanum = 0;
      this.hy_nameb = "";
      this.init();
    },
    //最新 加载更多
    infiniteHandler($state){
      //console.log('加载最新数据')
      axios.get(
          BASEURL +
            "getFlowListTimeAreaCode?areaCode=" +
            this.areaCode +
            "&areaName=" +
            this.hy_namea+
            '&pageSize='+this.pageSize+'&pageNo='+this.pageNo,
          {})
        .then(res=>{
          //console.log('page',this.pageNo);
          if(res.data.flowList.length){
            this.pageNo += 1;
            this.dataDetaiList.push(...res.data.flowList);
            $state.loaded();
          } else {
            $state.complete();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //最新
    textbBtn() {
      this.textaindex = 0;
      this.textbindex = 1;
      this.showNum = false;
      this.showFirse = false;
      this.hy_nameb = "";
      this.montsanum = 1;
      this.pageNo = 1;
      this.dataDetaiList = [];
    },
    //24小时站名搜索
    searchmonBrn() {
      let _this = this;
      _this.montsanum = 1;
      axios
        .get(
          BASEURL +
            "getsearch?areaCode=" +
            _this.areaCode +
            "&hyName=" +
            _this.hy_nameb,
          {}
        )
        .then(function(res) {
          _this.dataDetaiList = res.data.abnormalList;
          _this.dataDetaiList = _this.dataDetaiList.concat(
            res.data.disconnectionList
          );
          _this.dataDetaiList = _this.dataDetaiList.concat(res.data.normalList);
          _this.dataDetaiList = _this.dataDetaiList.concat(
            res.data.unconnectedList
          );
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //监测信息搜索
    searchBrn() {
      let _this = this;
      if (_this.textaindex == 0 && _this.textbindex == 1) {
        _this.textbBtn();
        this.infiniteId += 1;
      } else if(_this.textbindex == 2){
        this.dataDetaiList1 = [];
        this.pageNo = 1;
        this.infiniteId += 1;
      }
      
      // if (_this.status_a == 0) {
      //   _this.normal();
      // } else if (_this.status_a == 1) {
      //   _this.catout();
      // } else if (_this.status_a == 2) {
      //   _this.abnormal();
      // } else if (_this.status_a == 3) {
      //   _this.noaccess();
      // }
    },
    //历史监测 选择日期
    datePicker(){
      var _this =  this;
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM-DD',
        value: this.valueToday,
        onConfirm (val) {
          //console.log('plugin confirm', val)
          _this.valueToday = val;
          _this.historyBtn();
        },
        onShow () {
          //console.log('plugin show')
        },
        onHide () {
          //console.log('plugin hide')
        }
      })
    },
    //历史监测搜索
    historyBtn() {
      // let _this = this;
      // _this.historys();
      this.pageNo = 1;
      this.data_detail_his = [];
      this.infiniteId += 1;
    },
    init() {
      let _this = this;
      axios
        .get(BASEURL + "getMonitor?areaCode=" + _this.areaCode, {})
        .then(function(res) {
          _this.data_detail_time[0].number = res.data.flowNum;
          _this.data_detail_time[1].number = res.data.stopNum;
          _this.data_detail_time[2].number = res.data.noMonitorNum;
          _this.data_detail_time[3].number = res.data.nonitorNum;
          _this.startTime = res.data.start_time;
          _this.endTime = res.data.end_time;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //历史监测 加载更多
    historyHandler($state){
      axios.get(
          BASEURL +
            "getFlowListDayAreaCode?hyName=" +
            this.hy_name +
            "&areaCode=" +
            this.areaCode +
            "&seachTime=" +
            this.valueToday+'&pageSize='+this.pageSize+'&pageNo='+this.pageNo,
          {}
        )
        .then(res=>{
            //console.log('his',res)
            if(res.data.falg==false){
                //this.$Message.info('暂无数据')
                $state.complete();
            }else{
              if (res.data.flowList.length) {
                this.pageNo += 1;
                this.data_detail_his.push(...res.data.flowList);
                $state.loaded();
              } else {
                $state.complete();
              }
            }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //返回
    timeDetailbtn() {
      this.hy_namea = "";
      this.textaindex = 1;
      this.pageNo = 1;
      this.showFirse = false;
      this.textbindex = 0;
    },
    //异常
    abnormal($state) {
      let _this = this;
      axios
        .get(
          BASEURL +
            "getFlowList?areaCode=" +
            _this.areaCode +
            "&hyName=" +
            _this.hy_namea+'&pageNo='+this.pageNo+'&pageSize='+this.pageSize,
          {}
        )
        .then(res=>{
          let lists = res.data.flowList;
          if (lists.length) {
            this.pageNo += 1;
            for (let i = 0; i < lists.length; i++) {
              let status = lists[i].flow_status;
              if (status == 2) {
                this.dataDetaiList1.push(lists[i]);
                this.status_a = status;
              }
            }
            $state.loaded();
          } else {
            $state.complete();
          }
          
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //断流
    catout($state) {
      let _this = this;
      axios
        .get(
          BASEURL +
            "getStopList?areaCode=" +
            _this.areaCode +
            "&hyName=" +
            _this.hy_namea+'&pageNo='+this.pageNo+'&pageSize='+this.pageSize,
          {}
        )
        .then(res=>{
          let lists = res.data.stopList;
          if (lists.length) {
            this.pageNo += 1;
            for (let i = 0; i < lists.length; i++) {
              let status = lists[i].flow_status;
              if (status == 1) {
                this.dataDetaiList1.push(lists[i]);
                this.status_a = status;
              }
            }
            $state.loaded();
          } else {
            $state.complete();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //未接
    noaccess($state) {
      let _this = this;
      axios
        .get(
          BASEURL +
            "getNoMonitorList?areaCode=" +
            _this.areaCode +
            "&hyName=" +
            _this.hy_namea+'&pageNo='+this.pageNo+'&pageSize='+this.pageSize,
          {}
        )
        .then(res=>{
          let lists = res.data.empNoMonitorList;
          if (lists.length) {
            this.pageNo += 1;
            for (let i = 0; i < lists.length; i++) {
              let status = lists[i].flow_status;
              if (status == 3) {
                this.dataDetaiList1.push(lists[i]);
                this.status_a = status;
              }
            }
            $state.loaded();
          } else {
            $state.complete();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //正常
    normal($state) {
      let _this = this;
      axios
        .get(
          BASEURL +
            "getMonitorList?areaCode=" +
            _this.areaCode +
            "&hyName=" +
            _this.hy_namea+'&pageNo='+this.pageNo+'&pageSize='+this.pageSize,
          {}
        )
        .then(res=>{
          let lists = res.data.empMonitorList;
          if (lists.length) {
            this.pageNo += 1;
            for (let i = 0; i < lists.length; i++) {
              let status = lists[i].flow_status;
              if (status == 0) {
                this.dataDetaiList1.push(lists[i]);
                this.status_a = status;
              }
            }
            $state.loaded();
          } else {
            $state.complete();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //四个状态接口
    detailBtn(index) {
      let _this = this;
      _this.textaindex = 0;
      _this.textbindex = 2;
      _this.showNum = true;
      _this.showFirse = true;
      _this.dataDetaiList1 = [];
      this.fourType = (index + 1)
      this.pageNo = 1;

      if (index == 0) {
        _this.titleName = _this.data_detail_time[0].tit;
       // _this.abnormal();
      } else if (index == 1) {
        _this.titleName = _this.data_detail_time[1].tit;
        //_this.catout();
      } else if (index == 2) {
        _this.titleName = _this.data_detail_time[2].tit;
        //_this.noaccess();
      } else if (index == 3) {
        _this.titleName = _this.data_detail_time[3].tit;
        //_this.normal();
      }
    },
    //四个状态 加载更多
    fourListHandler($state){
      //console.log('4个状态')
      var fourType = this.fourType
       if (fourType == 1) {
        this.abnormal($state);
      } else if (fourType == 2) {
        this.catout($state);
      } else if (fourType == 3) {
        this.noaccess($state);
      } else if (fourType == 4) {
        this.normal($state);
      }
    },
    /* 前一天 */
    btn1() {
      let _this = this;
      _this.data_detail_his=[];
      let tcur = _this.showTime(-1);
      $("#date1").val(tcur);
      //_this.historys();
      this.pageNo = 1;
      this.data_detail_his = [];
      this.infiniteId += 1;
      $(".btn-next").removeClass("change-color");
    },
    // 后一天
    btn2() {
      let _this = this;
      if ($("#date1").val() >= _this.today) {
        let tcur = _this.showTime(0);
        $("#date1").val(tcur);
        $(".btn-next").addClass("change-color");
        // _this.$Message.warning("sddf");
      } else {
        let tcur = _this.showTime(1);
        $("#date1").val(tcur);
        $(".btn-next").removeClass("change-color");
        //historys _this.historys();
        this.pageNo = 1;
        this.data_detail_his = [];
        this.infiniteId += 1;
      }
    },

    addByTransDate(dateParameter, num) {
      let translateDate = "",
        dateString = "",
        monthString = "",
        dayString = "";
      translateDate = dateParameter
        .replace("年", "/")
        .replace("月", "/")
        .replace("日", "/");
      let newDate = new Date(translateDate);
      newDate = newDate.valueOf();
      newDate = newDate + num * 24 * 60 * 60 * 1000;
      newDate = new Date(newDate);
      //如果月份长度少于2，则前加 0 补位
      if ((newDate.getMonth() + 1).toString().length == 1) {
        monthString = 0 + "" + (newDate.getMonth() + 1).toString();
      } else {
        monthString = (newDate.getMonth() + 1).toString();
      }
      //如果天数长度少于2，则前加 0 补位
      if (newDate.getDate().toString().length == 1) {
        dayString = 0 + "" + newDate.getDate().toString();
      } else {
        dayString = newDate.getDate().toString();
      }
      dateString = newDate.getFullYear() + "-" + monthString + "-" + dayString;
      return dateString;
    },
    reduceByTransDate(dateParameter, num) {
      let translateDate = "",
        dateString = "",
        monthString = "",
        dayString = "";
      translateDate = dateParameter
        .replace("年", "/")
        .replace("月", "/")
        .replace("日", "/");
      let newDate = new Date(translateDate);
      newDate = newDate.valueOf();
      newDate = newDate - num * 24 * 60 * 60 * 1000;
      newDate = new Date(newDate);
      //如果月份长度少于2，则前加 0 补位
      if ((newDate.getMonth() + 1).toString().length == 1) {
        monthString = 0 + "" + (newDate.getMonth() + 1).toString();
      } else {
        monthString = (newDate.getMonth() + 1).toString();
      }
      //如果天数长度少于2，则前加 0 补位
      if (newDate.getDate().toString().length == 1) {
        dayString = 0 + "" + newDate.getDate().toString();
      } else {
        dayString = newDate.getDate().toString();
      }
      dateString = newDate.getFullYear() + "-" + monthString + "-" + dayString;
      return dateString;
    },

    //得到日期  主方法
    showTime(pdVal) {
      if (pdVal == 1) {
        this.valueToday = this.addByTransDate(this.valueToday, 1);
      } else if (pdVal == -1) {
        this.valueToday = this.reduceByTransDate(this.valueToday, 1);
      } else {
        this.valueToday = this.valueToday;
      }
      // 处理
      return this.valueToday;
    }
  }
};
</script>
<style lang='scss' scoped>
em {
  font-style: normal;
  font-family: "reducto_condensed_ssiCn";
  font-size: 0.45rem;
}
.monitor-infor {
  width: 100%;
  height: 100%;
  .monitor-fixed {
    position: fixed;
    top: 1rem;
    width: 100%;
    text-align: center;
  }
  .detail {
    margin-top: 3.7rem;
    margin-bottom: 1.325rem;
  }
  .monitor-top {
    height: 1rem;
    line-height: 1rem;
    vertical-align: middle;
    background: #fff;
  }
  .his-top {
    .date {
      width: 100%;
      vertical-align: middle;
      .date-icon {
        display: inline-block;
        width: 0.2rem;
        height: 0.375rem;
        vertical-align: middle;
      }
      .date-pre {
        background: url(../../static/img/date-pre.png) no-repeat;
        background-size: 100% 100%;
        margin-right: -0.4rem;
      }
      .date-next {
        background: url(../../static/img/date-next.png) no-repeat;
        background-size: 100% 100%;
        margin-left: -0.4rem;
      }
      .btn-default {
        font-size: 0.35rem;
        background: none;
        border: none;
        color: #666666;
        width: 1.55rem;
        vertical-align: middle;
        outline: none;
      }
      .btn-pre {
        padding-left: 0.45rem;
      }
      .btn-next {
        padding-right: 0.45rem;
      }
      .change-color{
          color: #ccc;
      }
      .form-control {
        font-size: 0.4rem;
        color: #000;
        border: none;
        text-align: center;
        background: none;
        margin-left: 0.3rem;
        margin-right: 0.3rem;
        width: 4rem !important;
        vertical-align: middle;
      }
    }
  }
  .page-list {
    height: 0.5rem;
    line-height: 0.7rem;
    background: #fafafa;
    padding-left: 0.5rem;
    text-align: left;
    font-size: 0;
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 0;
    }
    .lista {
      color: #666;
      font-size: 0.35rem;
    }
    .textjian {
      color: #32bdff;
      font-size: 0.35rem;
    }
    .jiantou {
      color: #666;
      font-size: 0.35rem;
    }
  }
  .sele-back {
    position: fixed;
    top: 2.5rem;
    width: 100%;
    background: #fafafa;
    padding: 0.2rem 0;
  }
  .back-second {
    top: 2rem;
  }
  .select {
    width: 8.375rem;
    height: 0.75rem;
    vertical-align: middle;
    line-height: 0.75rem;
    background: #fff;
    border-radius: 0.375rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    input {
      float: left;
      width: 75%;
      height: 0.75rem;
      line-height: 0.75rem;
      font-size: 0.375rem;
      border: none;
      outline: none;
      background: none;
      vertical-align: middle;
      margin-left: 0.3rem;
    }
    button {
      display: inline-block;
      width: 0.45rem;
      vertical-align: middle;
      height: 0.45rem;
      margin-left: 0.2rem;
      background: url(../../static/img/monitor_select.png);
      background-size: 100% 100%;
      border: none;
      outline: none;
    }
    .seg-inp {
      height: 0.5rem;
      vertical-align: middle;
    }
  }
  .segment {
    display: inline-block;
    width: 1px;
    height: 0.5rem;
    // line-height: 0.5rem;
    background: #cccaca;
    vertical-align: middle;
  }
  .data-num {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0.2rem;
    span {
      font-size: 0.325rem;
      display: inline-block;
    }
  }
  .data-ris {
    float: right;
  }
  .detail-li {
    margin-top: 0.2rem;
    background: #fff;
    padding: 0.225rem 0.5rem;
    text-align: left;
    vertical-align: middle;
  }

  .monitor-time {
    width: 100%;
    margin-top: 1rem;
    background: #f5f5f5;
    .time-top {
      height: 1rem;
      line-height: 1rem;
      padding: 0;
      vertical-align: middle;
      background: #fff;
      text-align: left;
      border-bottom: 0.025px solid #dddddd;
      .times-le {
        float: left;
        width: 65%;
        font-size: 0;
        &.active {
          .le-text {
            border-bottom: 0.05rem solid #32bdff;
          }
          span {
            color: #32bdff;
          }
        }
      }
      .le-padd {
        padding-right: 0.3rem;
      }
      .le-text {
        text-align: center;
        height: 0.995rem;
        line-height: 0.995rem;
      }
      .times-ri {
        float: left;
        width: 35%;
        position: relative;
        &.active {
          .ri-text {
            border-bottom: 0.05rem solid #32bdff;
          }
          span {
            color: #32bdff;
          }
        }
      }
      .tinme-po {
        position: absolute;
        top: 0.25rem;
        left: -0.025rem;
        display: inline-block;
        width: 1px;
        height: 0.5rem;
        background: url(../../static/img/power-line2.png) no-repeat;
        background-size: 100% 100%;
      }
      .ri-padd {
        padding-left: 0.3rem;
      }
      .ri-text {
        text-align: center;
        height: 0.995rem;
        line-height: 0.995rem;
      }
      span {
        display: inline-block;
        vertical-align: middle;
        font-size: 0.4rem;
        color: #000;
      }
      .time-second {
        font-size: 0.3rem;
      }
    }
    .detail-time {
      width: 100%;
      .time-li {
        overflow: hidden;
        .data-tip {
          float: left;
          width: 0.6rem;
          height: 0.6rem;
          margin-top: 0.2rem;
        }
        .icon0 {
          background: url(../../static/img/monitor_time_1.png) no-repeat;
          background-size: 100% 100%;
        }
        .icon1 {
          background: url(../../static/img/monitor_time_2.png) no-repeat;
          background-size: 100% 100%;
        }
        .icon2 {
          background: url(../../static/img/monitor_time_3.png) no-repeat;
          background-size: 100% 100%;
        }
        .icon3 {
          background: url(../../static/img/monitor_time_4.png) no-repeat;
          background-size: 100% 100%;
        }
        .data-con {
          float: left;
          margin-left: 0.2rem;
          width: 46%;
          span {
            display: block;
            text-align: left;
          }
          .data-t {
            font-size: 0.375rem;
            color: #333333;
          }
          .data-d {
            font-size: 0.325rem;
            color: #888888;
          }
        }

        .num0 {
          color: #ff3c3c;
        }
        .num1 {
          color: #ff8e10;
        }
        .num2 {
          color: #7c7c7b;
        }
        .num3 {
          color: #1caf25;
        }
        .next {
          display: inline-block;
          margin-top: 0.3rem;
          width: 0.225rem;
          height: 0.375rem;
          margin-left: 0.4rem;
          line-height: 100%;
          vertical-align: middle;
          background: url(../../static/img/arrow.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .monitor-history {
    width: 100%;
    margin-top: 3.16rem;
    margin-bottom: 1.325rem;
  }
  .detail-his {
    .his-li {
      .datah-con {
        float: left;
        .datah-tip {
          display: inline-block;
          vertical-align: middle;
          width: 0.4rem;
          height: 0.4rem;
        }
        .iconh0 {
          background: url(../../static/img/monitor_history_4.png) no-repeat;
          background-size: 100% 100%;
        }
        .iconh1 {
          background: url(../../static/img/monitor_history_2.png) no-repeat;
          background-size: 100% 100%;
        }
        .iconh2 {
          background: url(../../static/img/monitor_history_1.png) no-repeat;
          background-size: 100% 100%;
        }
        .iconh3 {
          background: url(../../static/img/monitor_history_3.png) no-repeat;
          background-size: 100% 100%;
        }
        .datah-t {
          display: inline-block;
          vertical-align: middle;
          font-size: 0.375rem;
          color: #333333;
          margin-left: 0.2rem;
          width: 4rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .con-tes {
          height: 0.75rem;
          line-height: 0.75rem;
          font-size: 0;
        }
        .datah-d {
          font-size: 0.35rem;
          margin-top: 0.15rem;
          color: #333333;
        }
      }
      .his-data {
        float: right;
        color: #616161;
        vertical-align: middle;
        em {
          display: inline-block;
          font-size: 0.6rem;
        }
      }
      .data-ones {
        text-align: right;
        font-size: 0.35rem;
        color: #333;
      }
      .data-pass {
        height: 0.25rem;
      }
      .data-two {
        height: 1rem;
        line-height: 1rem;
        font-size: 0;
        text-align: right;
        span {
          font-size: 0.35rem;
          color: #333;
        }
      }
    }
  }
  .monitor-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    top: auto;
    width: 100%;
    height: 1.325rem;
    line-height: 1.325rem;
    background: #fff;
    vertical-align: middle;
    background: url(../../static/img/bottom-bg.png) no-repeat;
    background-size: 100% 100%;
    .bottom-con {
      display: inline-block;
      vertical-align: middle;
      height: 1.325rem;
      line-height: 1.325rem;
      width: 50%;
      i {
        display: inline-block;
        vertical-align: middle;
      }
      .tip0 {
        width: 0.4rem;
        height: 0.475rem;
        background: url(../../static/img/monitor_time_icon_n.png) no-repeat;
        background-size: 100% 100%;
      }
      .tip1 {
        width: 0.5rem;
        height: 0.45rem;
        background: url(../../static/img/monitor_history_icon_n.png) no-repeat;
        background-size: 100% 100%;
      }
      span {
        font-size: 0.35rem;
        color: #666666;
        vertical-align: middle;
      }
    }
    .bottom-con.active {
      span {
        color: #32bdff;
      }
      .tip0 {
        background: url(../../static/img/monitor_time_icon_y.png) no-repeat;
        background-size: 100% 100%;
      }
      .tip1 {
        background: url(../../static/img/monitor_history_icon_y.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>